<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>canvas 转换函数</title>
  </head>
  <body>
    <canvas id="c1" width="300" height="300" style="border: 2px solid #a5F9Af">缩放与旋转 函数案例</canvas>
    <canvas id="c2" width="300" height="300" style="border: 2px solid #FAA9A2">方法重新映射画布上的 (0,0) 位置。</canvas>
    <canvas id="c3" width="300" height="300" style="border: 2px solid #dAF9A2">画布上的每个对象都拥有一个当前的变换矩阵|集成上面的功能</canvas>
    <canvas id="c4" width="300" height="300" style="border: 2px solid #a5FFA2">区分transform() 与 settransform()的不同</canvas>

    <script type="text/javascript">
    //scale()缩放 | rotate() 旋转
      var c=document.getElementById("c1");
      var ctx=c.getContext("2d");

      ctx.strokeStyle="blue";  //边框颜色
      ctx.strokeRect(5,5,25,15);  //矩形边框
      ctx.scale(2,2);  //进行200%放大

      ctx.strokeStyle="black";
      ctx.strokeRect(5,5,25,15);
      ctx.scale(2,2);
      ctx.strokeStyle="green";

      ctx.rotate(5*Math.PI/180);  //旋转5度,顺时针
      ctx.strokeRect(5,5,25,15);
      ctx.scale(1.5,1.5);
      ctx.strokeStyle="yellow";
      ctx.strokeRect(5,5,25,15);


      //translate() 方法重新映射画布上的 (0,0) 位置。
      var c=document.getElementById("c2");
      var context2=c.getContext("2d");
      context2.fillStyle="#a5FFA2";
      context2.fillRect(10,10,100,50);
      context2.translate(70,70);
      context2.fillRect(10,10,100,50);
      context2.translate(100,100);
      context2.fillRect(10,10,100,50);


      //transform() 方法来设置上面的全部方法
      var c3=document.getElementById("c3");
      var ctx=c3.getContext("2d");
      ctx.fillStyle="yellow";    //设置样式
      ctx.fillRect(0,0,250,100)

      ctx.transform(1,0.5,-0.5,1,30,10); //(x缩放,x倾斜,y倾斜,x缩放,x移动,y移动)
      ctx.fillStyle="red";
      ctx.fillRect(0,0,250,100);

      ctx.transform(1,0.5,-0.5,1,30,10);   //会在上一个绘制的矩形上面进行叠加
      ctx.fillStyle="blue";
      ctx.fillRect(0,0,250,100);


      //与transform() 方法不同的是每次作用后不会叠加
      var c=document.getElementById("c4");
      var ctx=c.getContext("2d");
      ctx.fillStyle="yellow";
      ctx.fillRect(0,0,250,100)

      ctx.setTransform(1,0.5,-0.5,1,40,20);  //（！importment）不会在上一个绘制的矩形上面进行叠加
      ctx.fillStyle="red";
      ctx.fillRect(0,0,250,100);

      ctx.setTransform(1,0.7,-0.7,1,40,20);
      ctx.fillStyle="blue";
      ctx.fillRect(0,0,56,57);


    </script>

  </body>
</html>
